<template>
  <div class="action-bar">
    <div class="btn-list">
      <!-- 刷新 -->
      <div v-if="hasBack">
        <button class="showOrHide1" @click="backUp">
          <i class="el-icon-back"></i> 返回
        </button>
      </div>
      <!-- <div v-if="hasFresh">
        <button class="showOrHide" @click="reloads">
          <i class="el-icon-refresh"></i> 刷新
        </button>
      </div>-->

      <div v-if="hasFresh" class="btn-item">
        <img src="~@/assets/action-bar-icon/refresh.png" @click="reloads" />
      </div>
      <div v-if="hasFasong" class="btn-item">
        <el-button
          v-if="fasongActive"
          type="text"
          class="showFasong"
          @click="fasong"
        >
          <svg-icon class-name="international-icon" icon-class="fasong-tijiao" />
          {{ fasongText }}
        </el-button>
        <el-button v-else type="text" class="hide" disabled>
          <svg-icon class-name="international-icon" icon-class="fasong-tijiao" />
          {{ fasongText }}
        </el-button>
      </div>
      <div v-if="hasQr" class="btn-item">
        <img
          v-if="qrActive && judgePermission(pageNo, 'QRcode')"
          src="~@/assets/action-bar-icon/qr-code-active.png"
          @click="qrShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/qr-code.png"
        />
      </div>
      <div
        v-if="hasExamineAuth && judgePermission(pageNo, 'assignAppFunction')"
        class="btn-item"
      >
        <img
          v-if="funcExamineAuthActive"
          src="~@/assets/action-bar-icon/examine.png"
          @click="funcExamineAuthShow"
        />
      </div>
      <div
        v-if="hasAppAuth && judgePermission(pageNo, 'assignAppFunction')"
        class="btn-item"
      >
        <img
          v-if="funcAppAuthActive"
          src="~@/assets/action-bar-icon/App-active.png"
          @click="funcAppAuthShow"
        />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/App.png" />
      </div>
      <div v-if="hasFuncAuth" class="btn-item">
        <img
          v-if="funcAuthActive && judgePermission(pageNo, 'permission')"
          src="~@/assets/action-bar-icon/func-auth-active.png"
          @click="funcAuthShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/func-auth.png"
        />
      </div>
      <div v-if="hasDataAuth" class="btn-item">
        <img
          v-if="dataAuthActive && judgePermission(pageNo, 'assignPermissions')"
          src="~@/assets/action-bar-icon/data2.png"
          @click="dataAuthShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/data1.png"
        />
      </div>
      <div v-if="hasAssignRole" class="btn-item">
        <img
          v-if="assignRole && judgePermission(pageNo, 'assignRole')"
          src="~@/assets/action-bar-icon/assign-role-active.png"
          @click="assignRoleShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/assign-roles-no.png"
        />
      </div>
      <!-- 导入 -->
      <a
        v-if="hasImport && hasImportDownload"
        class="btn-item"
        download
        :href="'./excel/' + hasImportName + '.xlsx'"
      >
        <el-button
          style="padding: 7px 10px"
          class="zh-button-two"
          type="primary"
        >下载导入模板</el-button>
      </a>
      <div v-if="hasImport" class="btn-item">
        <img
          v-if="importActive && judgePermission(pageNo, 'import')"
          src="~@/assets/action-bar-icon/Import-active.png"
          @click="Import"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/Import.png"
        />
      </div>
      <div v-if="hasExport" class="btn-item">
        <img
          v-if="exportActive"
          src="~@/assets/action-bar-icon/export-active.png"
          @click="Export"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/export.png"
        />
      </div>
      <div v-if="hasAdd" class="btn-item">
        <el-button v-if="addActive" type="text" class="showAdd" @click="add">
          <svg-icon class-name="international-icon" icon-class="add" />
          {{ addText }}
        </el-button>
        <el-button v-else type="text" class="hide" disabled>
          <svg-icon class-name="international-icon" icon-class="add" />
          {{ addText }}
        </el-button>
      </div>
      <div v-if="hasEdit" class="btn-item">
        <img
          v-if="editActive && judgePermission(pageNo, 'edit')"
          src="~@/assets/action-bar-icon/edit-active.png"
          @click="edit"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/edit.png"
        />
      </div>
      <div v-if="hasDel" class="btn-item">
        <img
          v-if="delActive"
          src="~@/assets/action-bar-icon/del-active.png"
          @click="del"
        />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/del.png" />
      </div>
      <div v-if="hasSave" class="btn-item">
        <img
          v-if="saveActive"
          src="~@/assets/action-bar-icon/save-active.png"
          @click="save"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/save.png"
        />
      </div>
      <div v-if="hasSaves" class="btn-item">
        <img
          v-if="saveActive"
          src="~@/assets/action-bar-icon/save-active.png"
          @click="save"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/save.png"
        />
      </div>
      <div v-if="hasCancel" class="btn-item">
        <img
          v-if="cancelActive"
          src="~@/assets/action-bar-icon/cancel-active.png"
          @click="cancel"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/cancel.png"
        />
      </div>
      <div v-if="hasRenewa" class="btn-item">
        <img
          v-if="renewaActive"
          src="~@/assets/action-bar-icon/ContractRenewa-active.png"
          @click="renewa"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/ContractRenewa.png"
        />
      </div>
      <div v-if="hasSuspension" class="btn-item">
        <img
          v-if="suspensionActive"
          src="~@/assets/action-bar-icon/suspensionOfContract-active.png"
          @click="suspension"
        />
        <img v-else src="~@/assets/action-bar-icon/suspensionOfContract.png" />
      </div>
      <div v-if="hasTermination" class="btn-item">
        <img
          v-if="terminationActive"
          src="~@/assets/action-bar-icon/terminationOfContract-active.png"
          @click="termination"
        />
        <img v-else src="~@/assets/action-bar-icon/terminationOfContract.png" />
      </div>
      <div v-if="hasRecovery" class="btn-item">
        <img
          v-if="recoveryActive"
          src="~@/assets/action-bar-icon/contractRecovery-active.png"
          @click="recovery"
        />
        <img v-else src="~@/assets/action-bar-icon/contractRecovery.png" />
      </div>
      <!-- <div v-if="hasImport" class="btn-item" @click="importData">导入</div> -->
      <div v-if="hasSort" class="btn-item" @click="sortData">排序</div>
      <div v-if="hasBreed">
        <button
          v-if="breedActive && judgePermission(pageNo,'breed')"
          class="showOrHide1"
          @click="breed"
        >
          <i class="el-icon-check"></i> 留种
        </button>
        <button v-else class="showOrHide2">
          <i class="el-icon-check"></i> 留种
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  inject: ["reload"],
  props: {
    // 刷新
    hasFresh: {
      type: Boolean,
      default: true
    },
    // 返回上一级
    hasBack: {
      type: Boolean,
      default: false
    },
    // 留种
    hasBreed: {
      type: Boolean,
      default: false
    },
    breedActive: {
      type: Boolean,
      default: false
    },
    hasImportName: {
      type: String,
      default: ""
    },
    hasImportDownload: {
      type: Boolean,
      default: true
    },
    // 合同终止
    hasTermination: {
      type: Boolean,
      default: false
    },
    terminationActive: {
      type: Boolean,
      default: false
    },
    // 合同中止
    hasSuspension: {
      type: Boolean,
      default: false
    },
    suspensionActive: {
      type: Boolean,
      default: false
    },
    // 合同中止
    hasRecovery: {
      type: Boolean,
      default: false
    },
    recoveryActive: {
      type: Boolean,
      default: false
    },
    // 合同续约
    hasRenewa: {
      type: Boolean,
      default: false
    },
    renewaActive: {
      type: Boolean,
      default: false
    },
    // 二维码
    hasQr: {
      type: Boolean,
      default: false
    },
    qrActive: {
      type: Boolean,
      default: false
    },
    // 功能权限
    hasFuncAuth: {
      type: Boolean,
      default: false
    },
    funcAuthActive: {
      type: Boolean,
      default: false
    },
    // App功能权限
    hasAppAuth: {
      type: Boolean,
      default: false
    },
    funcAppAuthActive: {
      type: Boolean,
      default: false
    },
    // App功能权限
    hasExamineAuth: {
      type: Boolean,
      default: false
    },
    funcExamineAuthActive: {
      type: Boolean,
      default: true
    },
    // 数据权限
    hasDataAuth: {
      type: Boolean,
      default: false
    },
    dataAuthActive: {
      type: Boolean,
      default: false
    },
    // 角色分配
    hasAssignRole: {
      type: Boolean,
      default: false
    },
    assignRole: {
      type: Boolean,
      default: true
    },
    // 导入
    hasImport: {
      type: Boolean,
      default: false
    },
    importActive: {
      type: Boolean,
      default: false
    },
    // 导出
    hasExport: {
      type: Boolean,
      default: false
    },
    exportActive: {
      type: Boolean,
      default: false
    },
    // 添加
    hasAdd: {
      type: Boolean,
      default: true
    },
    addActive: {
      type: Boolean,
      default: true
    },
    addText: {
      type: String,
      default: "添加"
    },
    // 修改
    hasEdit: {
      type: Boolean,
      default: true
    },
    editActive: {
      type: Boolean,
      default: false
    },
    // 删除
    hasDel: {
      type: Boolean,
      default: true
    },
    delActive: {
      type: Boolean,
      default: false
    },
    // 保存
    hasSave: {
      type: Boolean,
      default: true
    },
    // 保存特殊
    hasSaves: {
      type: Boolean,
      default: false
    },
    saveActive: {
      type: Boolean,
      default: false
    },
    // 取消
    hasCancel: {
      type: Boolean,
      default: false
    },
    cancelActive: {
      type: Boolean,
      default: false
    },
    // 导入
    // hasImport: {
    //   type: Boolean,
    //   default: false
    // },
    // 排序
    hasSort: {
      type: Boolean,
      default: false
    },
    pageNo: {
      type: Number,
      default: null
    },
    fasongText: {
      type: String,
      default: "提交"
    },
    // 提交终止
    hasFasong: {
      type: Boolean,
      default: false
    },
    fasongActive: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    backUp() {
      this.$emit("backUp");
    },
    fasong() {
      this.$emit("fasong");
    },
    breed() {
      this.$emit("breed");
    },
    reloads() {
      this.reload();
    },
    add() {
      this.$emit("add");
    },
    edit() {
      this.$emit("edit");
    },
    del() {
      this.$emit("del");
    },
    save() {
      this.$emit("save");
    },
    Import() {
      this.$emit("Import");
    },
    Export() {
      this.$emit("Export");
    },
    qrShow() {
      this.$emit("qrShow");
    },
    // 功能权限
    funcAuthShow() {
      this.$emit("funcAuth");
    },
    // App功能权限
    funcAppAuthShow() {
      this.$emit("funcAppAuth");
    },
    // 数据权限
    dataAuthShow() {
      this.$emit("dataAuth");
    },
    // 分配角色
    assignRoleShow() {
      this.$emit("assignRole");
    },
    cancel() {
      this.$emit("cancel");
    },
    renewa() {
      this.$emit("renewa");
    },
    suspension() {
      this.$emit("suspension");
    },
    termination() {
      this.$emit("termination");
    },
    recovery() {
      this.$emit("recovery");
    },
    // importData() {
    //   this.$emit("import");
    // },
    sortData() {
      this.$emit("sortData");
    },
    funcExamineAuthShow() {
      this.$emit("examine");
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.action-bar {
  width: 100%;
  height: $actionBarHeight;
  background-color: $hamburgerBgColor;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 10px;
  .btn-list {
    & > div {
      cursor: pointer;
      &:hover {
        transform: scale(1.08);
      }
    }
    display: flex;
    align-items: center;
    .showOrHide1 {
      cursor: pointer;
      margin-right: 18px;
      width: 68px;
      height: 29px;
      line-height: 20px;
      text-align: center;
      background: #6e7ae4;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      border: 2px solid #4d1fa8;
      color: white;
      font-size: 15px;
      &:hover {
        color: $tagsViewActiveBgColor;
      }
      > span {
        display: inline-block;
        width: 62px;
        height: 30px;
        background: #7c21b8;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.8);
        border-radius: 3px 3px 3px 3px;
        opacity: 1;
        padding: 4.5px 2px;
      }
      white-space: nowrap;
    }
    .showOrHide {
      cursor: pointer;
      margin-right: 18px;
      width: 68px;
      height: 29px;
      line-height: 20px;
      text-align: center;
      background: #1bd46e;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      border: 2px solid #07b519;
      color: white;
      font-size: 16px;
      &:hover {
        color: $tagsViewActiveBgColor;
      }
      > span {
        display: inline-block;
        width: 62px;
        height: 30px;
        background: #1bd46e;
        box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.7);
        border-radius: 3px 3px 3px 3px;
        opacity: 1;
        padding: 4.5px 2px;
      }
      white-space: nowrap;
    }
    .showOrHide1 {
      cursor: pointer;
      margin-right: 18px;
      width: 68px;
      height: 29px;
      line-height: 20px;
      text-align: center;
      background: #0058b1;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      border: 1px solid #0480fb;
      color: white;
      font-size: 16px;
      &:hover {
        color: $tagsViewActiveBgColor;
      }
      white-space: nowrap;
    }
    .showOrHide2 {
      cursor: pointer;
      margin-right: 18px;
      width: 68px;
      height: 29px;
      line-height: 20px;
      text-align: center;
      background: #3b3f3b;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      border: 2px solid #909290;
      color: rgb(137, 136, 136);
      font-size: 16px;
      white-space: nowrap;
    }
    .btn-item {
      display: flex;
      margin-right: 15px;
      img {
        height: 30px;
        cursor: pointer;
      }
      ::v-deep {
        .showFasong {
          // width: 68px;
          box-sizing: border-box;
          height: 30px;
          background: #518300;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px solid #93d626;
          box-shadow: 0 0 0.1px 0.3px #75b4c750;
          padding: 1px 2px;
          color: #ffffff;
          font-size: 15px;
          > span {
            display: inline-block;
            // width: 62px;
            height: 24px;
            // box-sizing: border-box;
            // line-height: 10px;
            background: #93d626;
            box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.26);
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            padding: 4.5px 4px;
            // display: flex;
          }
        }
        .showAdd {
          width: 68px;
          height: 30px;
          background: #0058b1;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px solid #0480fb;
          padding: 0;
          color: white;
          font-size: 15px;
          > span {
            display: inline-block;
            width: 62px;
            height: 24px;

            background: #0480fb;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.26);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            padding: 4.5px 2px;
            // display: flex;
          }
        }
        .hide {
          width: 68px;
          height: 30px;
          background: #003a4c;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px solid #004a61;
          padding: 0;
          color: #75b4c7;
          font-size: 15px;
          > span {
            display: inline-block;
            width: 62px;
            height: 24px;
            background: #004a61;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.26);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            padding: 4.5px 2px;
            // display: flex;
          }
        }
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .zh-button-two {
        background-color: rgb(31, 116, 199);
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.5s;
        backface-visibility: hidden;
        &:hover {
          // box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
          // transform: translateY(1px) rotateX(20deg);
          // animation: waterDrop 0.5s linear;
          transform: scale(1.08);
        }
      }

      @keyframes waterDrop {
        0% {
          background-color: rgb(31, 116, 199);
        }
        50% {
          background-color: #555555;
        }
        100% {
          background-color: rgb(31, 116, 199);
        }
      }
    }
  }
}
</style>
